<!doctype html>
<html lang="zh_cn" itemscope itemtype="http://schema.org/Person">
<head>
            <meta charset="utf-8">
        <!-- Site Meta Data -->
        <title>使用Pelican创建个性化静态博客</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="技术博客,涉及Java/PHP/Python/Javascript等,聊聊程序,聊聊生活,聊聊事实,聊聊育儿">
        <meta name="keywords" content="编码经验,技术分享,生活积累,实事评说">
        <meta name="author" content="布丁缘">

        <link rel="shortcut icon" href="">

        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
        <!-- Style Meta Data -->
        <link rel="stylesheet" href="https://www.ddkiss.com/theme/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="https://www.ddkiss.com/theme/css/pygments.css" type="text/css"/>

        <!-- Feed Meta Data -->
            <link href="https://www.ddkiss.com/feeds/all.atom.xml" type="application/atom+xml" rel="alternate"
                  title="一个程序员的简单生活 ATOM Feed"/>


    <meta name="keywords" content="">
    <link rel="stylesheet" href="//dn-coding-net-public-file.qbox.me/Coding-Comments/v0.1.0/default.css">
</head>

<body>
<!-- Sidebar -->
<aside>
    <center><h1><a href="/" style="color:#fff"><img id="avatar" src="/images/avatar.jpg"></a></h1></center>
        <p>一个程序员的简单生活</p>
    <br>
    <nav class="nav">
        <ul class="list-bare">
                <li><a class="nav__link" href="https://www.ddkiss.com/category/chang-yong-ji-qiao.html">常用技巧</a></li>
                <li><a class="nav__link" href="https://www.ddkiss.com/category/kai-fa-huan-jing.html">开发环境</a></li>
                <li><a class="nav__link" href="https://www.ddkiss.com/category/sheng-huo-dian-di.html">生活点滴</a></li>

                <li><a class="nav__link" href="/pages/books.html">书单</a></li>
                <li><a class="nav__link" href="/pages/movies.html">影单</a></li>
                <li><a class="nav__link" href="/pages/downloads.html">下载</a></li>
                <li><a class="nav__link" href="/pages/about.html">关于我</a></li>


        </ul>
    </nav>


    <form>
      <input type="text"  id="bdcsMain"/>
    </form>

</aside>

<!-- Content -->
<article>
  <main>
    <nav>
      <a href="/">首页</a>
      <a href="/archives.html">归档</a>
      <a href="/categories.html">分类</a>
      <a href="/tags.html">标签</a>
      <a href="/pages/about.html">关于我</a>
    </nav>
  </main>
    <section id="content">
        <article>
            <h2 class="post_title post_detail"><a href="https://www.ddkiss.com/archives/71.html" rel="bookmark"
                                                  title="Permalink to 使用Pelican创建个性化静态博客">使用Pelican创建个性化静态博客</a></h2>

            <div class="post_list">
                <span>作者：</span><a href="https://www.ddkiss.com/author/bu-ding-yuan.html">布丁缘</a>
                <span class="post_category">分类：<a href="https://www.ddkiss.com/category/kai-fa-huan-jing.html" rel="bookmark"
                                               title="Permalink to 开发环境">开发环境</a></span>
                <span class="post_date">  时间：2017-10-23 17:00:00</span>

            </div>
            <div class="entry-content blog-post">
                <p>Pelican创建静态博客网上内容很多，所以只想说下个人应用时一些碰到的问题以及个性化配置。</p>
<h2>一、Pelican 安装</h2>
<p>主要内容参考<a href="http://docs.getpelican.com/en/3.6.3/index.html">pelican doc</a>，英文不好的可以看<a href="http://pelican-zh.readthedocs.io/en/latest/zh-cn/">pelican 中文文档</a>。文档很详细，照着做一遍就可以了。下面简单说下。</p>
<p><strong>说明</strong>：必须安装了Python 2.7.x 或 Python 3.3+，不特殊说明时下列命令均在Linux终端执行</p>
<h3>1. 安装环境</h3>
<div class="highlight"><pre><span></span>pip install pelican markdown
</pre></div>


<h3>2. 新建项目</h3>
<div class="highlight"><pre><span></span>mkdir -p ~/projects/blogname
cd ~/projects/blogname
</pre></div>


<h3>3. 初始化项目</h3>
<div class="highlight"><pre><span></span>pelican-quickstart
</pre></div>


<h3>4. 新建一篇文章</h3>
<p>在 blogname/content 目录下新建一个 test.md 文件，内容如下：</p>
<div class="highlight"><pre><span></span>Title: 文章标题
Date: 2010-12-03 10:20
Category: 测试分类

Hello 我的博客
</pre></div>


<h3>5. 生成静态内容</h3>
<div class="highlight"><pre><span></span>pelican content
</pre></div>


<p>也可以使用<code>make html</code></p>
<h3>6. 预览</h3>
<div class="highlight"><pre><span></span>cd ~/projects/blogname/output
python -m pelican.server
</pre></div>


<p>然后在浏览器中输入 http://localhost:8000/ 查看</p>
<h3>7. 发布</h3>
<div class="highlight"><pre><span></span>pelican content -s publishconf.py
</pre></div>


<p>到此，一个简单的静态博客就建好了。可惜，默认的主题好丑。我们得好好折腾下咯。</p>
<h2>二、小技巧</h2>
<p>有些命令选项可以让我们用起来很爽，比如</p>
<div class="highlight"><pre><span></span>pelican -r content      #可以autoreload，自动重建修改的内容
pelican -r content -t /home/xxx/blogname/pelican-themes/Flex    #可以指定不同的主题，选主题时有用
</pre></div>


<h2>三、主题</h2>
<p>每次折腾博客，最耗时的就是选主题。自己要是会做就好了，哎。不会做就得找别人的改。官网提供了N多主题，参考<a href="https://github.com/getpelican/pelican-themes">这里</a>。我选择主题的标准：</p>
<ol>
<li>风格相对简约，布局略微紧凑</li>
<li>自动适配手机浏览，自适应布局</li>
<li>主题包结构清晰，易于二次修改</li>
</ol>
<p>对比了好几种主题： Flex, zurb-F5-basic, pelican-simplegrey, elegant, pelican-blue。经过了多轮修改测试，最终确定了 pelican-blue 这款主题，算是一个妥协的结果吧。</p>
<h2>四、主题包二次开发</h2>
<p>除了对 pelican-blue 样式上做了很多改动，模板代码也改了不少。</p>
<h3>1. 首页列表显示摘要</h3>
<p>修改 pelican-blue/templates/index.html 中显示列表时的代码</p>
<div class="highlight"><pre><span></span><span class="cp">{%</span> <span class="k">if</span> <span class="nv">DISPLAY_SUMMARY</span> <span class="k">and</span> <span class="nv">article.summary</span><span class="o">|</span><span class="nf">length</span> <span class="o">&gt;</span> <span class="m">0</span> <span class="cp">%}</span>
    <span class="nt">&lt;p&gt;</span><span class="cp">{{</span> <span class="nv">article.summary</span><span class="o">|</span><span class="nf">striptags</span><span class="o">|</span><span class="nf">escape</span> <span class="cp">}}</span><span class="nt">&lt;/p&gt;</span>
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
</pre></div>


<h3>2. 顶部导航</h3>
<p>在 Article 标签里加入如下代码，在 style.css 里加入相关样式</p>
<div class="highlight"><pre><span></span><span class="nt">&lt;main&gt;</span>
  <span class="nt">&lt;nav&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/&quot;</span><span class="nt">&gt;</span>首页<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/archives.html&quot;</span><span class="nt">&gt;</span>归档<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/categories.html&quot;</span><span class="nt">&gt;</span>分类<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/tags.html&quot;</span><span class="nt">&gt;</span>标签<span class="nt">&lt;/a&gt;</span>
    <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/pages/about.html&quot;</span><span class="nt">&gt;</span>关于我<span class="nt">&lt;/a&gt;</span>
  <span class="nt">&lt;/nav&gt;</span>
<span class="nt">&lt;/main&gt;</span>
</pre></div>


<h3>3. 侧边栏显示图片和博客名称</h3>
<div class="highlight"><pre><span></span><span class="nt">&lt;center&gt;&lt;h1&gt;&lt;a</span> <span class="na">href=</span><span class="s">&quot;/&quot;</span> <span class="na">style=</span><span class="s">&quot;color:#fff&quot;</span><span class="nt">&gt;&lt;img</span> <span class="na">id=</span><span class="s">&quot;avatar&quot;</span> <span class="na">src=</span><span class="s">&quot;</span><span class="cp">{{</span> <span class="nv">AVATAR</span> <span class="cp">}}</span><span class="s">&quot;</span><span class="nt">&gt;&lt;/a&gt;&lt;/h1&gt;&lt;/center&gt;</span>
<span class="cp">{%</span> <span class="k">if</span> <span class="nv">SIDEBAR_DIGEST</span> <span class="cp">%}</span>
    <span class="nt">&lt;p&gt;</span><span class="cp">{{</span> <span class="nv">SIDEBAR_DIGEST</span> <span class="cp">}}</span><span class="nt">&lt;/p&gt;</span>
<span class="cp">{%</span> <span class="k">endif</span> <span class="cp">%}</span>
</pre></div>


<h3>4. 修改Google统计为百度统计</h3>
<p>在 pelicanconf.py 中加入 <code>BAIDU_ANALYTICS = True</code>，然后修改 pelican-blue/templates/base.html，填入百度统计代码</p>
<h2>五、遇到的问题</h2>
<p><code>CRITICAL: UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 9: ordinal not in range(128)</code> 使用 Flex 主题时，一旦包括中文就报错，一直以为是模板的Bug。后来网上查了下，说是 Python 处理中文字符时的问题。解决办法如下： 在 pelicanconf.py 文件头部加入下面内容：</p>
<div class="highlight"><pre><span></span><span class="kn">import</span> <span class="nn">sys</span>
<span class="nb">reload</span><span class="p">(</span><span class="n">sys</span><span class="p">)</span>
<span class="n">sys</span><span class="o">.</span><span class="n">setdefaultencoding</span><span class="p">(</span><span class="s1">&#39;utf8&#39;</span><span class="p">)</span>
</pre></div>


<h2>六、说明</h2>
<p>从 wordpress 到 typecho, 文章没写多少，系统倒是换了几个。周末花了点时间又把博客迁移到 pelican 上了。你问我为什么？喜欢瞎折腾呗。阿里云 ECS 买的 1G 内存确实不够用，装了个 MySQL, 部署了一套Java Spring boot 写的 CRM 系统就把内存几乎耗尽了。所以，出发点就是如何用最小的成本让博客以最高效的性能展现。wordpress 功能倒是丰富，可惜吃内存厉害。 typecho 也是PHP写的，够精简了吧，主题我也改得差不多了，使用过程中还是不理想。直到看到 Pelican，我才觉得只有全站静态化才够“省”！</p>
            </div>
            <div class="post_list">
              <div><span>Tags : </span>
                          <span><a href="https://www.ddkiss.com/tag/pelican.html">#pelican, </a></span>
                          <span><a href="https://www.ddkiss.com/tag/jing-tai-bo-ke.html">#静态博客, </a></span>
                          <span><a href="https://www.ddkiss.com/tag/python.html">#python, </a></span>
              </div>
            </div>
        </article>
        <div id="container"></div>
        <script type="text/javascript" src="//dn-coding-net-public-file.qbox.me/Coding-Comments/v0.1.0/gitment.min.js"></script>
        <script>
            var gitment = new Gitment({
              owner: 'whusl',
              repo: 'BlogComments',
              oauth: {
                client_id: '621866266817529fba46681653017809',
                client_secret: '14188411740b12ae52159cee9b586bf85cd54125',
              },
            })
            document.getElementById('container').appendChild(gitment.render())
          </script>
    </section>
</article>

<!-- Footer -->
    <footer>
        <p> &copy;2017-2020&nbsp;<a href="http://www.miitbeian.gov.cn/" target="_blank">鄂ICP备17020200号</a>
          Blog powered by <a href="http://getpelican.com/">Pelican</a>
        </p>
    </footer>

    <!-- Analytics -->
    <script>
      var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?88c55edaf311dbacac56a16316b04c8b";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>

<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=14490611060029767912' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

</body>
</html>